import { ChangeEventHandler, ReactNode } from 'react';
import styled from 'styled-components'
import Input from '../../component/Input';


export interface Props {
    title: string;
    placeholder?: string;
    value?: string;
    default?: string;
    disable?: boolean;
    unit?: string;
    suffix?: ReactNode;
    onValueChange?: (value: string) => void;
    tips?: string;
    type?: 'text' | 'number';
    backgroundColor?: string;
}

const Container = styled.div`
    text-align: start;
    .xrkljkj-input {
        color: white !important;
        &::placeholder {
            color: ${(prop) => prop.theme.text.placeholder}
        }
    }
    
`
const Title = styled.span`
    font-size: .875rem;
    color: ${(prop) => prop.theme.text.input};
    width: 100%;
`
const InputBox = styled(Input) <{ $disable: number }>`
    margin-top: .75rem;
    height: 2.5rem;
    border: 1px solid rgba(255,255,255,0.31);
    border-radius: 3px;
    pointer-events: ${({ $disable }) => $disable ? 'none' : undefined};
`
const StyledSuffix = styled.div`
    display: flex;
    align-items: center;
    color: white;
`

const Tips = styled.span`
    color: ${(prop) => prop.theme.text.input};
    font-size: .6875rem;
`

const Suffix = (props: { unit?: string, element?: ReactNode }) => {
    return <StyledSuffix>
        {props.unit && <span>{props.unit}</span>}
        {props.element}
    </StyledSuffix>
}

const Item: React.FC<Props> = ({ title, placeholder, value, unit, suffix, disable, type, onValueChange, backgroundColor, tips, ...other }) => {

    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
        onValueChange?.(event.currentTarget.value)
    }

    return <Container>
        <Title>{title}</Title>
        <InputBox
            $disable={Number(Boolean(disable))}
            inputClassName='xrkljkj-input'
            backgroundColor={backgroundColor || '#2A4762'}
            size='large'
            type={type}
            placeholder={placeholder}
            value={value || other.default}
            onChange={(event) => handleChange(event)}
            suffix={(unit || suffix) ? <Suffix
                unit={unit}
                element={suffix}
            /> : undefined}
        />
        {tips && <Tips>{tips}</Tips>}
    </Container>
}

export default Item